<template>
  <div>
			<div class="top-title">
				<h2>框框补漆</h2>
				<div class="desc">专业汽车补漆·品质保障</div>
			</div>
			<div>
				<div>
					<ul class="tab" id="tabUl">
						<li @click="tabClick('userInfo')" :class="[activeTab === 'userInfo'? 'on': '']">
              <span class="iconfont">&#xe60c;</span>个人信息
            </li>
						<li @click="tabClick('salesInfo')" :class="[activeTab === 'salesInfo'? 'on': '']">
              <span class="iconfont">&#xe7ce;</span>消费记录
            </li>
					</ul>
				</div>
				<div class="main" v-show="activeTab === 'userInfo'">
					<!-- 头像-昵称-电话 -->
					<div class="box my-info">
						<div>
							<img id="icon" :src="myInfo.headimgurl" style="width:50px; border-radius: 50%;">
						</div>
            <p>会员ID：{{ myInfo.userId || 36 }}</p>
						<ul>
							<li><span>注册时间</span><span>{{ shop.created_at? shop.created_at[0]: '' }}</span></li>
							<li><span>累计订单</span><span class="font-w">5单</span></li>
							<li><span>累计消费</span><span class="main-color font-w font-14">￥{{shop.consumptionCount || 0}}</span></li>
						</ul>
					</div>
          <div class="box bt-row col-center" @click="showBand = true">
            <div class="flex col-center band-info">
              <div class="flex col-center">
                <span class="iconfont icon-20">&#xe62e;</span>
              </div>
              <div class="ml-5">
                <p class="title">查看绑定信息</p>
                <p class="desc">手机号·车辆信息</p>
              </div>
            </div>
            <div class="flex col-center">
              <span class="iconfont icon-20">&#xe600;</span>
            </div>
          </div>
					<!-- 门店信息 -->
					<div class="box store-info">
						<div class="title"><span class="iconfont">&#xe60e;</span>门店信息</div>
						<ul>
							<li v-for="(item, index) in storeList" :key="item.name+index">
								<p class="li-title">{{ item.name }}</p>
								<p>地址：<span>{{item.address}}</span></p>
								<p>电话：<span>{{ item.tel }}</span></p>
							</li>
						</ul>
					</div>
				</div>
				<div class="main" v-show="activeTab === 'salesInfo'">
          <!-- 筛选条件 -->
           <div class="search-top bt-row">
            <div class="search-top-left">
              <p class="title">我的保单记录</p>
              <p class="desc">共1条记录(已筛选)</p>
            </div>
            <button @click="showSearch = !showSearch">
              <span class="iconfont">&#xe6be;</span>
              筛选
            </button>
           </div>
          <div v-if="showSearch" class="search-box">
            <div class="search-title bt-row">
              <span class="title">筛选条件</span>
              <span  @click="showSearch = false">×</span>
            </div>
            <ul>
              <li>
                <p class="title">时间范围</p>
                <p>
                  <select id="country" name="country">
                    <option v-for="(time, index) in dateOptions" :value="time" :key="time+index">
                      {{ time }}
                    </option>
                  </select>
                </p>
              </li>
              <li>
                <p class="title">手机号</p>
                <p>
                  <select id="country" name="country">
                    <option v-for="(time, index) in phoneOptions" :value="time" :key="time+index">
                      {{ time }}
                    </option>
                  </select>
                </p>
              </li>
              <li>
                <p class="title">车牌号</p>
                <p>
                  <select id="country" name="country">
                    <option 
                      v-for="(time, index) in carArr" 
                      :value="time.opt_car_series_name" 
                      :key="time.opt_car_series_name+index">
                      {{ time.opt_car_series_name }}
                    </option>
                  </select>
                </p>
              </li>
            </ul>
            <div class="bt-row mt-12">
              <button class="btn btn-default">重置</button>
              <button class="btn btn-black">确定</button>
            </div>
          </div>
					<!-- <div class="sales-top">
						<div class="title">我的保单记录</div>
						<div class="desc">点击订单查看详细保修信息</div>
					</div> -->
					<ul class="car-ul">
            <li v-for="(item, index) in salesList" :key="item.product_name+index" @click="orderClick(item)">
              <p class="title between">
                <span>{{ item.product_name }}</span>
                <span 
                :class="['tag', 
                item.business_order_status === '已完成' ? 'tag-success':
                (item.business_order_status !== '已完成' ? 'tag-warning': '')
                ]">{{ item.business_order_status }}</span>
              </p>
              <div class="bt-row font-12">
                <div>
                  <p>
                    <span class="iconfont">&#xe698;</span>
                    {{item.opt_car_series_names}}·{{item.business_car_license_plate}}
                  </p>
                  <p>13631338857</p>
                </div>
                <span class="tag tag-success">有效</span>
              </div>
              <p class="between"><span><span class="iconfont">&#xe60a;</span>2024-12-01</span><span class="amount">￥{{item.pay_amount}}</span></p>
              <p>
                <span class="iconfont">&#xebc8;</span><span>1</span>年质保·保修至2025-12-01(剩余<span>135</span>天)
              </p>
            </li>
					</ul>
          <!-- <button @click="getMore" class="more">加载更多</button> -->
				</div>
			</div>
      <myDialog v-if="showDialog">
        <Login 
        v-model="myInfo.tel"
        style="margin-top: 100px;"
        @toLogin="toLogin" 
        @toCancel="showDialog = false" />
      </myDialog>
      <!-- 订单详情弹框 -->
      <myDialog v-if="showOrderDialog">
        <OrderDetail 
        v-model="curOrderInfo"
        style="margin-top: 30px;"
        @closeDialog="showOrderDialog = false" />
      </myDialog>
      <!-- 绑定信息 -->
      <myDialog v-if="showBand">
        <bandDetail 
        v-model="curOrderInfo"
        style="margin-top: 30px;"
        :phoneArr="phoneArr"
        :carArr="carArr"
        @closeBand="showBand = false" />
      </myDialog>
  </div>
</template>

<script>
import myDialog from './myDialog.vue'
import Login from './Login.vue';
import OrderDetail from './orderDetail.vue';
import bandDetail from './bandDetail.vue';
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  components: {
    myDialog,
    Login,
    OrderDetail,
    bandDetail,
  },
  data(){
    return {
      showBand: false,
      showSearch: false,
      timeArr: [
        '全部时间',
        '近1个月',
        '近3个月',
        '近6个月',
        '近1年',
      ],
      phoneArr: [],
      carArr: [],
      phoneOptions: [],
      carOptions: [],
      shop: {},
      showOrderDialog: false,
      curOrderInfo: {},
      showDialog: false,
      activeTab: '',
      myInfo: {
        headimgurl: 'https://www.baidu.com/img/flexible/logo/pc/result@2.png',
        nickname: '张先生',
        tel: '13631338888'
      },
      config: {}, // 配置信息
      storeList: [], // 门店列表
      salesList: [], // 销售列表
    }
  },
  mounted() {
    // 1.需要调起授权页面
    this.getAuth()
  },
  methods: {
    orderClick(item) {
      this.curOrderInfo = { ...item }
      this.showOrderDialog = true
    },
    toLogin(tel) {
      this.showDialog = false
      this.myInfo.tel = tel
      this.tabClick('userInfo')
    },
    tabClick(name) {
      this.activeTab = name
      if(name === 'userInfo') {
        this.getStoreList()
      } else if(name === 'salesInfo') {
        this.getSalesList()
      }
    },
    // 获取配置信息
    async getConfig() {
      // 用axios发请求
      try {
        let url = "/api/getConfig"
        const res = await this.$axios.get(url)
        return res.data
      } catch (error) {
        alert('获取配置信息报错')
      }
    },
    // 门店列表
    async getStoreList() {
      try {
        // 用axios发请求
        let url = "/api/getUserInfo"
        const data = this.myInfo
        const res = await this.$axios.post(url, data)
        const resData = res.data.data
        this.shop = resData;
        this.storeList = resData.shopList || []
        this.dateOptions = resData.created_at
        this.phoneOptions = resData.tel
        this.phoneArr = this.dateOptions.map((date, index) => {
          return {
            date,
            phone: this.phoneOptions[index]
          }
        })
        this.carArr = resData.carList
      } catch (error) {
        alert('服务器异常，请稍后')
      }
    },
    getMore() {
      this.getSalesList()
    },
    // 销售列表
    async getSalesList() {
      // 用axios发请求
      try {
        let url = "/api/getOrderInfo"
        // const data = this.myInfo
        const data = {openid: this.myInfo.openid}
        const res = await this.$axios.post(url, data)
        this.salesList = res.data.data
      } catch (error) {
        alert('服务器异常，请稍后')
      }
    },
    async sendCode(code) {
      // 用axios发请求
      try {
        const uuid = this.$route.query.state
        let url = `/api/getCode?code=${code}&uuid=${uuid}`
      const res = await this.$axios.get(url)
      // 用户数据
      this.myInfo = {...res.data, tel: uuid}
      // this.showDialog = true;
      this.tabClick('userInfo')
      } catch (error) {
        alert('获取个人信息异常，请稍后')
      }
    },
    async getAuth() {
      // 1.先获取配置信息
      if(!this.config.appId) {
        this.config = await this.getConfig()
      }
      if(!this.config.uuid) {
        this.config = await this.getConfig()
      }
      
      let config = this.config;
      console.log('config', config)
      
      // 是否为回调页面
      let paramsObj = this.getUrlParams()
      console.log('paramsObj', paramsObj);
      // 防止刷新页面时，数据丢失，故需要回填数据
      let img = window.localStorage.getItem("icon")
      let name = window.localStorage.getItem("nickname")
      let openid = window.localStorage.getItem("openid")
      
      if (img && name && openid) {
        // $("#icon").attr("src", img)
        // $("#nickname").text(name)
        this.tabClick('userInfo')
        // 设置到config备用

        config.openid = openid;
        // 3.最后，获取我的其他资料，图片等等
        getMyData(openid)
      } else if (paramsObj && paramsObj.code) {
        console.log('paramsObj', paramsObj);

        // 2.通过code，去获取用户信息
        let t = setTimeout(() => {
            clearTimeout(t)
            this.sendCode(paramsObj.code)
        }, 500)
      } else {
        // config = {
        // "appid": "wx27098251bf9659d0",
        // "appsecret": "69794a64b3e4bb6bc478f447fbb6d7ab",
        // "userInfo_redirect_url": "http://wanfeng-cn.gnway.cc"
        // }
        // 1.初次页面，需要调起授权页面
        let backUrl = encodeURIComponent(config.userInfo_redirect_url)
        const uuid = this.$route.query.state
        let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${config.appid}&redirect_uri=${backUrl}&response_type=code&scope=snsapi_userinfo&state=${uuid}#wechat_redirect`
        console.log('url', url)
        window.location.href = url;
      }
    },
    // 获取url的参数
    getUrlParams() {
      let str = window.location.search
      console.log('str', str);
      let obj = {}
      // ?code=051YCH000vmCDN1EmM200Bdl0f3YCH0w:77 str ?
      if (str && str.includes("?") && str.includes("=")) {
        str = str.slice(1)
        if (str.includes("&")) {
          let arr = str.split("&")
          for (let i = 0; i < arr.length; i++) {
            let one = arr[i].split("=")
            obj[one[0]] = one[1]
          }
        } else {
          let one = str.split("=")
          obj[one[0]] = one[1]
        }
      } 
      return obj;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  *{
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .ml-5{
    margin-left: 5px;
  }
  .box .band-info .title{
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: bold;
  }
  .box .band-info .desc{
    font-size: 12px;
    color: #ccc;
  }
  .col-center {
    align-items: center;
  }
  .flex{
    display: flex;
  }
  .main-color {
    color: #1f44b6;
  }
  .font-12{ font-size: 12px; }
  .font-14{ font-size: 14px; }
  .font-w {
    font-weight: bold;
  }
  .search-box select{
    width: 100%;
    height: 32px;
    line-height: 32px;
    border-radius: 6px;
    border: 1px solid #f4f4f4;
  }
  .search-box option {
    height: 32px !important;
    line-height: 32px !important;
  }
  .search-box .title {
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .search-top {
    padding: 0 12px 20px;
    align-items: center;
  }
  .search-top .title {
    color: #000;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
  }
  .search-top .desc {
    color: #666;
    font-size: 12px;
  }
  .search-top button {
    font-size: 12px;
    color: #000;
    border: 1px solid #f4f4f4;
    background-color: #fff;
    padding: 6px 12px;
    height: 28px;
    border-radius: 6px;
  }
  .search-box {
    padding: 20px;
    border: 1px solid #f4f4f4;
    border-radius: 6px;
    text-align: left;
    margin-bottom: 20px;
  }
  .search-title{
    font-size: 16px;
    font-weight: bold;
  }
  .search-title .title{
    margin-bottom: 5px;
  }
  .more {
    height: 40px;
    line-height: 40px;
    margin: 12px 0;
    display: block;
    width: 100%;
    background-color: #f4f4f4;
    border: none;
  }
  .iconfont {
    margin-right: 2px;
  }
  .top-title {
    text-align: center;
    background-color: #1f44b6;
    padding: 10px;
    color: #fff;
    letter-spacing: 4px;
    padding: 24px 0;
  }
  .top-title .desc{
    margin-top: 12px;
    font-size: 14px;
  }
  .main {
    padding: 20px;
  }
  .box {
    border: 1px solid #ededed;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 18px;
  }
  .box .title{
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: left;
  }
  .tab {
    display: flex;
    padding: 0px;
    justify-items: center;
    background-color: #f4f4f4;
    padding: 2px;
  }
  .tab li {
    flex: 1;
    font-size: 14px;
    background-color: #f4f4f4;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
  }
  .tab li.on{
    background-color: #fff;
  }
  #list1{
    display: none
  }
  .my-info p {
    height: 24px;
    line-height: 24px;
    margin-top: 12px;
  }
  .my-info ul {
    background-color: #eef2fc;
    border-radius: 8px;
    padding: 0 16px;
  }
  .my-info li {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #dfdfdf;
    height: 36px;
    line-height: 36px;
    font-size: 12px;
  }
  .my-info{
    text-align: center;
  }
  .my-info img {
    width: 60px;
    height: 60px;
  }
  .my-info .tel {
    color: #484f57;
  }
  .my-info p.nickname {
    font-size: 20px;
    font-weight: bold;
  }
  .user-info li {
    height: 46px;
    line-height: 46px;
    border-bottom: 1px solid #ededed;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .store-info .li-title {
    font-size: 16px;
    font-weight: bold;
    color: #000;
  }
  .store-info li{
    color: #484f57;
    font-size: 14px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #ededed;
    text-align: left;
  }
  .store-info li:last-child{
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .store-info li p{
    margin-bottom: 4px;
  }

  /* 列表2 */
  .sales-top{
    text-align: center;
  }
  .sales-top .title{
    font-size: 20px;
    font-weight: bold;
    margin: 20px 0 12px;
  }
  .sales-top .desc{
    margin-bottom:12px;
  }
  .car-ul li {
    border: 1px solid #ededed;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 18px;
    text-align: left;
  }
  .car-ul li p{
    margin-bottom: 10px;
    color: #666;
    font-size: 12px;
    
  }
  .car-ul li p.between{
    display: flex;
    justify-content: space-between;
  }
  .car-ul li p.title {
    font-size: 16px;
    font-weight: bold;
    color: #000;
  }
  .car-ul li p.sub-title {
    font-size: 14px;
  }
  .amount{
    font-weight: bold;
    font-size: 14px;
    color: #1f44b6;
  }
  .bt-row {
    display: flex;
		justify-content: space-between;
  }
  .btn {
        margin-top: 12px;
        background-color: blue;
        padding: 6px 14px;
        color: #fff;
        border: none;
        border-radius: 6px;
				width: 100%;
    }
    .btn-black {
      margin-left: 5px;
      background-color: #18181b;
    }
    .btn-default {
      margin-right: 5px;
      background-color: #fff;
      color: #000;
      border: 1px solid #666;
    }
</style>
